<script>
	import { getContext } from 'svelte';
	import { t } from 'svelte-i18n';
	import { fly } from 'svelte/transition';
	import { activeVersion, mobileMode, viewportWidth } from '$lib/store/app-stores';
	import { isNewOutfitReleased } from '$lib/helpers/outfit';
	import { noticeMark } from '$lib/helpers/noticeMark';
	import NoticeMark from '$lib/components/NoticeMark.svelte';

	export let activeShop = 'genesis';
	export let isOpen = false;

	$: resizeable = $viewportWidth < 700 && !$mobileMode;

	// Notice Marks
	const { patch } = $activeVersion;
	const outfits = getContext('outfits');
	const hasNewOutfits = isNewOutfitReleased(patch);

	// Shop Menu Handle
	const selectShopMenu = getContext('selectShopMenu');
	const asideToggle = getContext('asideToggle');

	const selectShop = (shop) => {
		activeShop = shop;
		selectShopMenu(shop);

		// NoticeMark
		if (['outfits', 'recomended'].includes(shop) && hasNewOutfits) {
			return noticeMark.openNotice(`${shop}-${patch}`);
		}
	};
</script>

{#if isOpen && resizeable}
	<div class="bg" on:mousedown|self={asideToggle} transition:fly={{ x: -10, duration: 100 }} />
{/if}

<aside
	class="navbar"
	class:resizeable
	class:show={isOpen}
	transition:fly={{ x: -100, duration: 200 }}
>
	<div class="top">{$t('shop.text')}</div>
	<div class="nav-item">
		<button
			class="link"
			class:active={activeShop === 'recomended'}
			on:click={() => selectShop('recomended')}
		>
			{#if hasNewOutfits}
				<NoticeMark name="recomended-{patch}" />
			{/if}
			<span>
				<i class="gi-recomended" />
				{$t('shop.recomendedHeading')}
			</span>
		</button>

		{#if $outfits.length > 0}
			<button
				class="link"
				class:active={activeShop === 'outfits'}
				on:click|preventDefault={() => selectShop('outfits')}
			>
				{#if hasNewOutfits}
					<NoticeMark name="outfits-{patch}" />
				{/if}
				<span><i class="gi-outfit" /> {$t('outfit.heading')}</span>
			</button>
		{/if}

		<button
			class="link"
			class:active={activeShop === 'paimon-bargains'}
			on:click={() => selectShop('paimon-bargains')}
		>
			<span>
				<i class="gi-paimon-bargains" />
				{$t('shop.paimonHeading')}
			</span>
		</button>
		<button
			class="link"
			class:active={activeShop === 'genesis'}
			on:click={() => selectShop('genesis')}
		>
			<span>
				<i class="gi-genesis" />
				{$t('shop.crystalTopup')}
			</span>
		</button>
		<button
			class="link"
			class:active={activeShop === 'donate'}
			on:click={() => selectShop('donate')}
		>
			<span>
				<i class="gi-companion" />
				{$t('donate')}
			</span>
		</button>
	</div>
</aside>

<style>
	.navbar {
		width: 320px;
		height: 100%;
		display: block;
		background-color: rgba(75, 82, 101, 0.8);
		border-right: 1px solid #d2c69c;
		border-left: 1px solid #d2c69c;
		color: #d2c69c;
		margin-right: 3%;
		position: relative;
		z-index: -1;
	}
	:global(.mobile) .navbar {
		width: 190px;
	}

	.navbar.resizeable {
		position: fixed;
		top: 0;
		left: 0;
		width: 200px;
		background-color: rgba(75, 82, 101, 1);
		z-index: 10;
		transform: translateX(-110%);
		transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	}
	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(75, 82, 101, 0.5);
		z-index: 8;
		backdrop-filter: blur(10px);
	}

	aside.resizeable.show {
		transform: translateX(0);
	}

	.top {
		font-size: 1.5rem;
		width: 100%;
		height: 80px;
		background-color: #3b4255;
		padding: 0 20px 20px;
		display: flex;
		align-items: flex-end;
	}
	:global(.mobile) .top {
		height: 50px;
		font-size: 1.2rem;
		padding: 0 20px 10px;
		margin-bottom: -10px;
	}

	.nav-item {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		color: #f0e4d4;
	}

	.link {
		position: relative;
		transition: all 0.2s;
		text-decoration: none;
		color: #ededed;
		aspect-ratio: 70/17.5;
		display: flex;
		align-items: center;
		padding-left: 5%;
		z-index: 1;
		text-align: left;
	}
	.link i {
		font-size: 2rem;
		display: inline-block;
		margin-right: 10px;
	}
	:global(.mobile) .link i {
		font-size: 1.4rem;
	}

	.link.active,
	.link:hover {
		background-color: #ede5d8;
		color: #40475a;
		border-radius: 0.25rem;
	}

	.link::after,
	.link::before,
	span::after,
	span::before {
		content: '';
		position: absolute;
		background-size: contain;
		display: block;
	}

	.link.active::before {
		top: 50%;
		right: -13.25%;
		height: 100%;
		aspect-ratio: 37/30;
		transform: translateY(-50%) rotate(180deg);
		z-index: -1;
		line-height: 120%;
		background-repeat: no-repeat;
		background-image: url('');
	}

	.link.active::after {
		top: 50%;
		right: -1%;
		width: 100%;
		aspect-ratio: 708/156;
		transform: translateY(-50%) rotate(180deg);
		background-image: url('');
		background-repeat: no-repeat;
	}

	span {
		display: flex;
		align-items: center;
		width: 100%;
		height: 95%;
		position: relative;
		overflow: hidden;
	}
	span :global(i) {
		line-height: 0;
	}

	.active span::before {
		width: 40%;
		height: 100%;
		z-index: -1;
		top: 0;
		right: 0;
		content: '\68';
		font-family: 'genshin-icon' !important;
		font-style: normal !important;
		font-weight: normal !important;
		font-variant: normal !important;
		text-transform: none !important;
		speak: none;
		line-height: 90%;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-size: 5rem;
		color: #e3d9c4;
	}

	.active span::after {
		width: 100%;
		height: 100%;
		z-index: -1;
		background-image: linear-gradient(
			to right,
			rgba(237, 229, 216, 1) 60%,
			rgba(237, 229, 216, 0) 80%
		);
	}
</style>
